<template>
  <div>
    <h2>HOME</h2>
    <div>
      <button @click="$router.back()">&lt;&lt;&lt;&lt;&lt;</button>
      <button @click="$router.forward()">&gt;&gt;&gt;&gt;&gt;</button>
      <button @click="$router.go(2)">----222---</button>
    </div>
    <div>
      <router-link to="/home/news">news</router-link>
      <!-- <router-link to="/home/music/1/4min">华语music</router-link>
      <router-link to="/home/music/2/5min">粤语music</router-link>
      <router-link to="/home/music/3/2min">英语music</router-link> -->

      <!-- 
        注意事项:
          - to的对象写法中,如果和params一起使用,则不能书写path,只能使用name
          - 可选的params参数,要么不写,要么写一个undefined做为值,不能书写一个空字符串
       -->
      <router-link
        :to="{
          name: 'music',
          params: {
            id: '1',
            //time: '',
            time: undefined,
          },
        }"
        >华语music</router-link
      >

      <router-link
        :to="{
          name: 'music',
          params: {
            id: '2',
            time: undefined,
          },
        }"
        >粤语music</router-link
      >

      <router-link
        :to="{
          name: 'music',
          params: {
            id: '3',
          },
        }"
        >英语music</router-link
      >

      <router-link
        :to="{
          path: '/home/games',
          //name: 'games',
          query: {
            tit: '暴力摩托',
            version: '2007',
          },
        }"
      >
        游戏1
      </router-link>

      <router-link to="/home/games?tit=qq飞车&version=2018">
        游戏2
      </router-link>

      <div>
        <button @click="showSubHtml">html学科</button>
        <button @click="showSubCss">css学科</button>
        <button @click="showSubJs">js学科</button>
      </div>
    </div>

    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Home",
  methods: {
    showSubHtml() {
      this.$router.push("/home/subject?sub=html&t=easy");
    },
    showSubCss() {
      /* 
        push:保留历史记录
        replace:替换历史记录
      */
      this.$router.replace({
        // path: "/home/subject",
        name: "subject",
        query: {
          sub: "css",
          t: "center",
        },
      });
    },
    showSubJs() {
      this.$router.push({
        name: "subject",
        //如果params传值,直接传递的是一个对象,则路由配置不需要在使用动态parmas参数接受
        //可能会在历史回退的时候丢失值
        params: {
          sub: "js",
          t: "nan",
        },
      });
    },
  },
};
</script>

<style>
</style>